<template>
  <div>
    <!--    添加项目分类弹窗-->
    <a-modal v-model="addCardShow" title="新增项目分类" @ok="addProject" @cancel="cleanText">
      <a-form>
        <a-form-item
            label="分类名称"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-input placeholder="请填写项目分类名称" v-model="projectName"/>
        </a-form-item>
        <a-form-item
            label="分类介绍"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-input placeholder="请填写该项目分类简要介绍" v-model="synopsis"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <!--    修改项目分类弹窗-->
    <a-modal v-model="editShow" title="修改项目分类" @ok="editProject" @cancel="cleanText">
      <a-form>
        <a-form-item
            label="分类名称"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-input placeholder="请填写项目分类名称" v-model="projectName"/>
        </a-form-item>
        <a-form-item
            label="分类介绍"
            :labelCol="{span: 7}"
            :wrapperCol="{span: 10}"
        >
          <a-input placeholder="请填写该项目分类简要介绍" v-model="synopsis"/>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-card :bordered="false">
      <div style="display: flex; flex-wrap: wrap">
        <head-info title="项目总类别数" content="17类" :bordered="true"/>
        <head-info title="生产性建筑类别数" content="2类" :bordered="true"/>
        <head-info title="非生产性建筑类别数" content="15类"/>
      </div>
    </a-card>
    <a-card
        style="margin-top: 24px"
        :bordered="false"
        title="项目分类表"
    >
      <div slot="extra">
        <a-radio-group>
          <a-radio-button>全部</a-radio-button>
          <a-radio-button>生产性建筑</a-radio-button>
          <a-radio-button>非生产性建筑</a-radio-button>
        </a-radio-group>
      </div>
      <a-button type="dashed" style="width: 100%" icon="plus" @click="showAddModal">添加</a-button>
      <a-list size="large">
        <a-list-item :key="item.project_class_id" v-for="item in projectClassList">
          <a-list-item-meta
              :description = item.project_class_tip
          >
            <a-avatar slot="avatar" size="large" shape="square" src="https://images.pexels.com/photos/302769/pexels-photo-302769.jpeg"/>
            <a slot="title">{{ item.project_class_name }}</a>
          </a-list-item-meta>
          <div slot="actions">
            <a @click="showEditCard(item)">编辑</a>
          </div>
          <div slot="actions">
            <a @click="deleteProjectClass(item.project_class_id)">删除</a>
          </div>
          <div class="list-content">
<!--            <div class="list-content-item">-->
<!--              <span>Owner</span>-->
<!--              <p>付晓晓</p>-->
<!--            </div>-->
            <div class="list-content-item">
              <span>创建时间</span>
              <p>{{ creatTime }}</p>
            </div>
<!--            <div class="list-content-item">-->
<!--              <a-progress :percent="80" style="width: 180px" />-->
<!--            </div>-->
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script>
import HeadInfo from '../../../components/tool/HeadInfo'
import Axios from 'axios'

const projectNameList = ["工业建筑", "农业建筑", "居住建筑", "公共建筑", "文教建筑", "科研建筑", "医疗建筑", "园林建筑", "纪念建筑", "其他建筑类"]
const classifyList = []
for (let i = 0; i < projectNameList.length; i++) {
  classifyList.push({
    id: i,
    // 分类名
    projectName: projectNameList[i],
    // 分类介绍
    synopsis: "测试类别介绍，巴拉巴拉巴拉巴拉",
    creatTime: ''
  })
}

export default {
  name: 'ProjectClassification',
  components: {HeadInfo},
  data() {
    return {
      url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
      // 分类名
      projectName: '',
      // 分类介绍
      synopsis: '',
      addCardShow: false,
      editShow: false,
      changeId: 0,
      projectClassList: [],
      classifyList,
      projectNameList
    }
  },
  computed: {
    creatTime() {
      return new Date().toLocaleString()
    }
  },
  methods: {
    showAddModal() {
      this.addCardShow = true
    },
    showEditCard(item) {
      this.changeId = item.project_class_id
      this.projectName = item.project_class_name
      this.synopsis = item.project_class_tip
      this.editShow = true
    },
    cleanText() {
      this.projectName = this.synopsis = ""
    },
    // 获取所有项目分类
    getAllProjectClass() {
      Axios.get(this.url + '/pxManagerSystem/getAllProjectClass')
          .then(res => {
            this.projectClassList = res.data.data.projectClassList
          }).catch(err => {
        console.log(err)
      })
    },
    // 添加项目分类
    addProject() {
      Axios.post(this.url + '/pxManagerSystem/insertProjectClass', {
        "project_class_name": this.projectName,
        "project_class_tip": this.synopsis
      }).then(res => {
        console.log(res)
        this.getAllProjectClass()
        this.projectName = this.synopsis = ""
      }).catch(err => {
        console.log(err)
      })
      // this.classifyList.push({
      //   id: this.classifyList.length,
      //   // 分类名
      //   projectName: this.projectName,
      //   // 分类介绍
      //   synopsis: this.synopsis
      // })
      this.addCardShow = false
    },
    editProject() {
      Axios.put(this.url + '/pxManagerSystem/updateProjectClassByProjectClassId', {
        "project_class_id": this.changeId,
        "project_class_name": this.projectName,
        "project_class_tip": this.synopsis
      }).then(res => {
        console.log(res)
        this.getAllProjectClass()
        this.projectName = this.synopsis = ""
      }).catch(err => {
        console.log(err)
      })
      this.editShow = false
    },
    // 删除项目分类
    deleteProjectClass(id) {
      Axios.delete(this.url + '/pxManagerSystem/deleteProjectClassByProjectClassId', {
        data: {
          project_class_id: id
        }
      }).then(res => {
        this.$message.info(res.data.message)
        this.getAllProjectClass()
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    // 获取所有项目分类
    this.getAllProjectClass()
  }
}
</script>

<style lang="less" scoped>
.list-content-item{
  color: @text-color-second;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span{
    line-height: 20px;
  }
  p{
    margin: 4px 0 0;
    line-height: 22px;
  }
}
</style>
